<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

		<title>动画</title>
		<link href="//cdn.bootcss.com/semantic-ui/2.2.1/semantic.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
		<script src="//cdn.bootcss.com/semantic-ui/2.2.1/semantic.min.js"></script>
		<link rel="stylesheet" href="css/style.css">

	

		<script>
			$(document).ready(function() {
				$('.ui.sidebar').sidebar('attach events', '.toc.item');
				$('#more').bind('click', function() {
					$('.spotlight3').after('<section class=\"spotlight spotlight1\">\n\t\t\t\t<div class=\"image\"><img src=\"img/201607.jpg\" alt=\"\" /></div>\n\t\t\t\t<div class=\"content ui center aligned basic segment\">\n\t\t\t\t\t<h2>2016年7月新番专题</h2>\n\t\t\t\t\t<p>新一代邪教登场</p>\n\t\t\t\t\t<button class=\"ui primary button\">详细</button>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<section class=\"spotlight spotlight2\">\n\t\t\t\t<div class=\"image\"><img src=\"img/201604.jpg\" alt=\"\" /></div>\n\t\t\t\t<div class=\"content ui center aligned basic segment\">\n\t\t\t\t\t<h2>2016年4月新番专题</h2>\n\t\t\t\t\t<p>一言不合就装coolest</p>\n\t\t\t\t\t<button class=\"ui primary button\">详细</button>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<section class=\"spotlight spotlight3\">\n\t\t\t\t<div class=\"image\"><img src=\"img/201601.jpg\" alt=\"\" /></div>\n\t\t\t\t<div class=\"content ui center aligned basic segment\">\n\t\t\t\t\t<h2>2016年1月新番专题</h2>\n\t\t\t\t\t<p>Ru摇出新花样</p>\n\t\t\t\t\t<button class=\"ui primary button\">详细</button>\n\t\t\t\t</div>\n\t\t\t</section>');
					$('#more').text('没有了');
					$('#more').addClass('disabled');
				});
			});
		</script>
	</head>

	<body >

		<div class="ui vertical inverted sidebar menu">
			<a class="item" href="index.html">首页</a>
			<a class="item" href="manga.html">漫画</a>
			<a class="active  item" href="animation.html">动画</a>
		</div>

		<div class="ui inverted vertical masthead center aligned segment navbar">

			<div class="ui container">
				<div class="ui large secondary inverted pointing menu">
					<a class="toc item">
						<i class="sidebar icon"></i>
					</a>
					<a class="item" href="index.html">首页</a>
					<a class="item" href="manga.html">漫画</a>
					<a class="active  item" href="animation.html">动画</a>

				</div>
			</div>

			<div class="ui text container logo-title">
				<h1 class="ui inverted header">
                    动画
      </h1>
				<h2>有声有色的作品</h2>
				<span class="bg"></span>
				<img class="sun" src="img/sun.svg">
                <img class="blimp" src="img/blimp.svg">
			</div>

		</div>

		<section id="two" class="wrapper">
			<section class="spotlight spotlight1">
				<div class="image"><img src="img/201607.jpg" alt="" /></div>
				<div class="content ui center aligned basic segment">
					<h2>2016年7月新番专题</h2>
					<p>新一代邪教登场</p>
					<button class="ui primary button">详细</button>
				</div>
			</section>
			<section class="spotlight spotlight2">
				<div class="image"><img src="img/201604.jpg" alt="" /></div>
				<div class="content ui center aligned basic segment">
					<h2>2016年4月新番专题</h2>
					<p>一言不合就装coolest</p>
					<button class="ui primary button">详细</button>
				</div>
			</section>
			<section class="spotlight spotlight3">
				<div class="image"><img src="img/201601.jpg" alt="" /></div>
				<div class="content ui center aligned basic segment">
					<h2>2016年1月新番专题</h2>
					<p>Ru摇出新花样</p>
					<button class="ui primary button">详细</button>
				</div>
			</section>
			<button class="fluid ui attached button" id="more">更多内容</button>
		</section>

		<footer>
			<div class="ui inverted vertical footer segment">
				<div class="ui container">
					<div class="ui stackable inverted grid">
						<div class="eight wide column">
							<h4 class="ui inverted header">联系我</h4>
							<div class="ui inverted link list">

								<a href="#"><img class="content-me" src="img/qq.png"></a>
								<a href="#"><img class="content-me" src="img/wechat.png"></a>

							</div>
						</div>
						<div class="eight wide column">
							<h4 class="ui inverted header">友情链接</h4>
							<div class="ui inverted link list">
								<a href="http://www.yxdown.com/news/" target="_blank">游讯新闻</a>
								<a href="http://tech.feng.com/" target="_blank">锋科技</a>
								<a href="http://www.geekfans.com/" target="_blank">极客迷</a>
								<a href="http://tv.cctv.com/lm/bjjt/" target="_blank">百家讲坛</a>
								<a href="http://beta.acfun.tv/" target="_blank">Acfun</a>
								<a href="http://www.bilibili.com/" target="_blank">blibli</a>
								<a href="http://www.dygang.com/" target="_blank">电影港</a>
							</div>
						</div>

					</div>
					<div class="ui inverted section divider"></div>
					<div class="ui center aligned container ">
						&copy;2016 Sroot. All rights reserved.</div>
				</div>
			</div>
		</footer>

	</body>

</html>